{extend name="main" /}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-fluid">

    <div class="layui-card">

        <div class=" layui-card-header layuiadmin-card-header-auto">
            {include file="staff/index_form"}

        </div>

        <div class="layui-card-body">

            <table class="layui-hide layui-table" id="test"  lay-filter="test"></table>
        </div>
    </div>

    <div class="layui-elem-quote" style="background-color: #fff">
        <p>接入客服会话的方式：{$staffUrl['hostUrl']}/home/login/AccessLogin?secret=<span title="你的密钥" style="color:red">{$staffUrl['secret']}</span>&depart_id=<span style="color:blue">[部门ID]</span>&staff=<span style="color:blue">[员工ID]</span>&userid=<span style="color:red">[会话顾客ID]</span></p>
        <p style="color:red">其中部门ID和员工ID为可选参数，会话顾客ID为必填参数</p>
        <button type="button" class="layui-btn  layui-btn-sm" onclick="$('.layui-code').toggle()">查看完整示例</button>
<pre style="display: none" class="layui-code">
/**
 * 发起会话连接
 * @param userInfo 用户基本信息
 * @param agent  咨询的客服组
 * @param peerId  指定咨询的客服
 * @param title  咨询标题
 * @constructor
 */
function IMLink(userInfo,agent,peerId,title){
    var secret = '{$staffUrl['secret']}';//你的密钥

    if(!userInfo || !userInfo.userid){
        alert('请先登录，才能联系客服哦~');
        location.href="/login.html";
        return;
    }
    var params = {
        secret:secret,
        userid:userInfo.userid,
        username: userInfo.nickname,//用户昵称
        mobile:userInfo.phone,//用户手机号
        depart_id:agent||0,//客服组id
        staff_id:peerId||0,//客服id
        headimg:userInfo.photo,//用户头像
        extend:{//附加信息
            'UID':userInfo.userid,
            '级别':userInfo.levelName||'',
            'username':userInfo.username,
        }
    }
    var url = "{$staffUrl['hostUrl']}/home/login/AccessLogin.html"+queryParams(params,true)
    location.href = url
}

/**
 * 对象转url参数
 * @param {*} data
 * @param {*} isPrefix
 */
function queryParams (data, isPrefix) {
    isPrefix = isPrefix ? isPrefix : false
    let prefix = isPrefix ? '?' : ''
    let _result = []
    for (let key in data) {
        let value = data[key]
        // 去掉为空的参数
        if (['', undefined, null].includes(value))continue;
        if (value.constructor === Array) {
            value.forEach(_value => {
                _result.push(encodeURIComponent(key) + '[]=' + encodeURIComponent(_value))
            })
        }else if(value.constructor === Object){
            let _result_item = []
            for( let item in value){
                _result_item.push('"'+encodeURIComponent(item)+ '":"' + encodeURIComponent(value[item])+'"' )
            }
            _result.push(encodeURIComponent(key) + '=' + encodeURIComponent("{"+_result_item.join(',')+"}"))
        }
        else {
            _result.push(encodeURIComponent(key) + '=' + encodeURIComponent(value))
        }
    }
    return _result.length ? prefix + _result.join('&') : ''
}
</pre>
    </div>


    <!--html模版列表-->
{include file="staff/index_tpl"}

</div>
{/block}
{block name="js"}
<script src="/static/admin/js/layuiTableApi.js"></script>
<script>
        //  <i class="layui-icon layui-icon-edit "></i>  编辑图标
        var table = layui.table,form = layui.form,laytpl  = layui.laytpl ;
        var cols = [
            {"type":"checkbox"},
            {"field":"id","title":"id","width":80,"sort":true},
            {"field":"depart_id_text","title":"所属部门","sort":true,"templet":"#selectdepart_idTpl"},
            {"field":"name","title":"姓名",templet: "#nameTpl"},
            {"field":"mobile","title":"手机号"},
            {"field":"head","title":"头像","width":100,"templet":"#imageHeadTpl"},
            {"field":"priority","title":"优先级"},
            {"field":"status","title":"状态","width":100,"sort":true,"templet":"#switchStatusTpl"},
            {"field":"work_status_text","title":"工作状态","width":120,"sort":true},
            // {"field":"online","title":"最后活动时间"},
            {"field":"create_time_text","title":"时间","width":250,"sort":true,"templet":'#timeTpl'},
            // {"field":"login_time_text","title":"最后登陆时间","width":180,"sort":true},
            {"title":"操作","templet":"#apiListBar","width":200}
        ];
        //表格初始化
        table.render(getLayuiInit('#test','index.html',cols));

        //监听单行工具条
        //监听单行工具条
        table.on('tool(test)',(obj)=>{
            var data = obj.data;
            if(obj.event === 'del'){
                layuiApiDel(data,()=>{obj.del()})
            } else if(obj.event === 'edit'){
                //窗口编辑
                ajax_open('员工列表编辑','edit.html?id='+data.id,'1200','800')
                //新页面编辑
                //[window.open]('edit.html?id='+data.id,'_self');
            }else if(obj.event == 'autoLogin'){
                //快捷登陆
                window.open("{:url('autoLogin')}?id="+data.id)
            }
        });

        //表格顶部工具栏事件
        table.on('toolbar(test)', (obj)=>{
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            switch(obj.event){
                //批量删除
                case 'dels':
                    var data = checkStatus.data;  //获取选中行数据
                    if(data.length==0){
                        layer.msg('请选择要删除的数据！',{icon:5});return ;
                    }
                    layuiApiDel(data,()=>{table.reload('test',{})});break;
                case 'export':
                    apiExport();
                    break;
                case 'edit':
                    //窗口编辑
                    ajax_open('员工列表编辑','edit.html','1200','800')
                    //新页面编辑
                    //[window.open]('edit.html','_self');
                    break;
            };
        });

        //监听单元格编辑
        table.on('edit(test)', OnLayuiEdit);

        //触发排序事件
        table.on('sort(test)', OnLayuiOrder);

        //监听状态操作
        form.on('switch(switchTpl)', OnLayuiSwitch);

        //监听数据提交事件
        form.on('submit(save)', OnLayuiSave);
</script>
{/block}
